<template>
	<view class="box">
		<view class="head">
			<view class="container">
				<image class="photo" @click="changePop" :src="ImgUrl==''? cirSrc1 : ImgUrl"></image>
			</view>
			<view class="cont">
				<view class="cont_head">
					<view class="text1" @click="changePop">
						{{ isText== true? userList.user.nickname : 'xxxxx'}}
					</view>
					<view class="bgCss" :style="{background:userList.user.is_vip==1?'#DDE1E3' :'#637BE9',}"
						@click="toVip">
						<image class="img" v-if="userList.user.is_vip==1" :src="cirSrc2"></image>
						<image class="img" v-else :src="cirSrc3"></image>
						<view class="text2" :style="{ color:userList.user.is_vip==1?'#5E5E5E' :'#ffff'}">
							{{userList.user.is_vip==1?'升级会员': 'VIP会员'}}
						</view>
					</view>
				</view>

				<view class="idCss">
					<!-- {{ isText== true? userList.user.id :'xxxxx'}} -->
				</view>
			</view>
		</view>

		<view class="content1">
			<view class="content1-head">
				<img src="/static/newImg/container1.png" class="imgs">
				<view class="text">
					金额
				</view>
			</view>

			<view class="money">
				<view class="money-item">
					<view class="num">{{ isText== true?userList.user.asset_price : 'xxxxx'}}
					</view>
					<view class="text">
						总花费
					</view>
				</view>
				<view class="lineCss"></view>
				<view class="money-item">
					<view class="num">{{isText== true?userList.user.sell_price:'xxxxx'}}
					</view>
					<view class="text">
						总回血
					</view>
				</view>
				<view class="lineCss"></view>
				<view class="money-item">
					<view class="num">{{isText== true?userList.user.money:'xxxxx'}}
					</view>
					<view class="text">
						净值
					</view>
				</view>
			</view>
		</view>

		<view class="content1">
			<view class="content1-head">
				<img src="/static/newImg/container2.png" class="imgs">
				<view class="text">
					数量
				</view>
			</view>
			<view class="money">
				<view class="money-item">
					<view class="num">{{isText== true?userList.sum_goods:'xxxxx'}}
					</view>
					<view class="text">
						全部
					</view>
				</view>
				<view class="lineCss"></view>
				<view class="money-item">
					<view class="num">{{isText== true?userList.fuyi_goods:'xxxxx'}}
					</view>
					<view class="text">
						服役中
					</view>
				</view>
				<view class="lineCss"></view>
				<view class="money-item">
					<view class="num">{{isText== true?userList.tuiyi_goods:'xxxxx'}}
					</view>
					<view class="text">
						已退役
					</view>
				</view>
			</view>
		</view>

		<view class="content2 " @click="OpinionShow = true">
			<view class="content2-left">
				<img src="/static/newImg/container3.png" class="imgs">
				<view class="text">
					联系开发者
				</view>
			</view>
			<view class="iconCss">
				<uni-icons type="right" size="15"></uni-icons>
			</view>
		</view>

		<newDrawer :open="openFlag" @isClose="isCloseVip" :data="userList"></newDrawer>
		<pop v-show="popShow" @closePop="closePop" :popImg="popImg" ref="pop"></pop>
		<opinion v-show="OpinionShow" @closeOpinionShow="OpinionShow = false"></opinion>
	</view>
</template>

<script>
	import pop from '@/pages/tabBar/pop/pop.vue'
	import photo1 from '@/static/newImg/myImg.png'
	import photo2 from '@/static/newImg/diamond@2x.png'
	import photo3 from '@/static/newImg/container4.png'
	import newDrawer from '@/pages/tabBar/component/newDrawer/newDrawer.vue'
	import opinion from '@/pages/tabBar/component/opinions/opinions.vue'
	export default {
		components: {
			newDrawer,
			pop,
			opinion
		},
		data() {
			return {
				cirSrc1: '/static/newImg/myImg.png',
				cirSrc2: photo2,
				cirSrc3: photo3,
				openFlag: false,
				userList: {},
				popShow: false,
				ImgUrl: '', // 头像
				isText: '', // 判断是否登录然后显示数值
				OpinionShow: false, //意见反馈弹框
				popImg: ''
			};
		},
		onShow() {
			if (uni.getStorageSync('user_token')) {
				// 登录并获取用户信息
				this.isText = true
				this.getUser()
			} else {
				this.isText = false
				uni.reLaunch({
					url: '/pages/tabBar/logo/logo'
				});
			}
		},
		methods: {
			changePop() {
				try {
					
					if (this.ImgUrl != '') {
						this.popImg = this.ImgUrl
					}
					if (this.isText && this.userList.user.nickname != '') {
						this.$refs.pop.setName(this.userList.user.nickname)
					}
				} catch (error) {
					//TODO handle the exception
				}
				this.popShow = true
			},
			changeLogo() {
				console.log('changeLogo111111111');
			},
			closePop() {
				this.popShow = false
				this.getUser()
			},
			// 打开窗口
			toVip() {
				if (this.userList.user.is_vip == 1) {
					this.openFlag = true;
					uni.hideTabBar();

				} else {
					this.openFlag = false
					uni.showTabBar();
				}
			},
			// 关闭窗口
			isCloseVip() {
				this.openFlag = false;
				
				uni.showTabBar();
				this.getUser();
				
			},
			getUser() {
				this.$api.userApi({}).then(res => { //调用封装的api
					if (res.code == 1) {
						this.userList = res.result
						this.ImgUrl = res.result.user.head_img
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 10px 15px;

		.head {
			display: flex;
			// justify-content: space-between;
			align-items: center;

			.container {
				width: 81px;
				/* 或者你想要的图片宽度 */
				height: 81px;
				/* 和宽度相等，保持正方形 */
				display: flex;
				align-items: center;
				justify-content: center;

				.photo {
					width: 100%;
					height: 100%;
					border-radius: 50%;

					.pic-cover {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.image-circle {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					/* 使图片圆形化 */
				}
			}

			.cont {
				// width: 60%;
				margin-left: 20px;
				display: flex;
				flex-direction: column;

				.cont_head {
					width: 100%;
					display: flex;
					align-items: center;

					.text1 {
						font-family: "Roboto";
						font-weight: 500;
						font-size: 17px;
						color: #5E5E5E;
					}

					.bgCss {
						margin-left: 20px;
						display: flex;
						align-items: center;
						padding-left: 7px;
						width: 96px;
						height: 21px;
						background: #DDE1E3;
						border-radius: 14px 14px 14px 14px;

						.text2 {

							display: inline-block;
							font-family: "Roboto";
							font-weight: 400;
							font-size: 14px;
							color: #5E5E5E;
							margin-left: 8px;
						}

						.img {
							width: 17px;
							height: 17px;
						}
					}
				}

				.idCss {
					font-family: "Roboto";
					font-weight: 400;
					font-size: 10px;
					color: #ABB4BA;
					line-height: 24px;
					text-align: left;
				}
			}
		}

		.content1 {
			margin-top: 25px;
			// width: 392px;
			height: 127px;
			background: #FFFFFF;
			box-shadow: 0px 6 11px 0px rgba(37, 51, 75, 0.1), 0px 2 3px 0px rgba(37, 51, 75, 0.1);
			border-radius: 14px 14px 14px 14px;

			&-head {
				padding-top: 15px;
				padding-left: 20px;
				display: flex;
				align-items: center;

				.imgs {
					width: 17px;
					height: 17px;
				}

				.text {
					margin-left: 5px;
					width: 34px;
					height: 20px;
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 17px;
					color: #637BE9;
					line-height: 24px;
				}
			}

			.money-item:last-child {
				border-right: 0px;
			}

			.money {
				margin-top: 24px;
				display: flex;
				align-items: center;
				text-align: center;

				&-item {
					width: 35%;
					border-right: 1px solid #D8D8D8;

					.num {
						height: 17px;
						font-family: Roboto, Roboto;
						font-weight: 700;
						font-size: 17px;
						color: #5E76E9;
						line-height: 17px;
						margin-bottom: 6px;
					}

					.text {
						font-family: Roboto, Roboto;
						font-weight: 500;
						font-size: 14px;
						color: #1E2933;
					}
				}
			}
		}

		.content2 {
			margin-top: 25px;
			padding-left: 20px;
			padding-right: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 51px;
			background: #FFFFFF;
			border-radius: 14px 14px 14px 14px;

			&-left {
				display: flex;
				align-items: center;

				.imgs {
					width: 17px;
					height: 17px;
				}

				.text {
					margin-left: 5px;
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 17px;
					color: #637BE9;
					line-height: 24px;
				}
			}
		}
	}
</style>